<template>
  <div>
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      highlight-hover-row
      row-id="id"
      class="mytable-footer"
      height="500"

      :data="tableData"
    >
      <vxe-table-column field="cardNo" title="油卡号" min-width="120" />
      <vxe-table-column field="transNo" title="流水号" min-width="180" />
      <vxe-table-column field="transTime" title="发生时间" min-width="160" />
      <vxe-table-column field="amount" title="交易金额" min-width="110" />
      <vxe-table-column field="balance" title="交易后可用余额" min-width="140" />
      <vxe-table-column field="transDesc" title="交易说明" min-width="120" />
      <vxe-table-column field="remark" title="补充信息" min-width="110" />
    </vxe-table>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import request from '@/utils/request'
Vue.use(VXETable)
export default {
  name: 'Child',
  data() {
    return {
      tableData: [],
      form: {
        code: '',
        vehicleCode: '',
        driverCode: '',
        violationTime: '',
        reimburseTime: '',
        violationPlace: '',
        violationProject: '',
        deductPoints: '',
        penaltyAmount: '',
        companyFee: '',
        personalFee: '',
        remark: ''
      }
    }
  },
  created() {},
  methods: {
    // 获取页面信息
    getInfo(cardNo) {
      request({
        url: `/ntocc-tps-api/zhaoYou/cardTransactions`,
        params: { cardNo: cardNo },
        method: 'get'
      }).then(response => {
        this.tableData = response.data
        this.$message({ message: response.msg, type: 'success' })
      })
    },/*
    // 底部颜色设置
    footerCellClassName({ $rowIndex, column, columnIndex }) {
      if (columnIndex === 0) {
        if ($rowIndex === 0) {
          return 'col-blue'
        } else {
          return 'col-red'
        }
      }
    } */
  }
}
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin-top: 50px;
  }
</style>
